<template>
	<view class="orderpage">
		<view class="card">
			<view class="film-box">
				<view class="film-info">
					<view class="film-name">
						{{OrederData.itemName}} -{{OrederData.name}}
					</view>
					<view class="film-original">
						{{OrederData.facePrice}}
					</view>
					<view class="film-price">
						￥{{OrederData.salePrice}}
					</view>
				</view>
				<view class="film-img">
						<img class="loaded" :src="OrederData.icon" alt="" />
				</view>
			</view>
		</view>
		<!-- 充值账号 -->
		<view class="card">
			<view class="card-input">
					<uni-easyinput errorMessage v-model="inputvalue1" focus placeholder="充值账号" ></uni-easyinput>
			</view>
			<view class="card-input">
					<uni-easyinput errorMessage v-model="inputvalue2" focus placeholder="确认账号" ></uni-easyinput>
			</view>
		</view>
		
		<!-- 详情展示 -->
		<view class="card">
			<view class="title">
				详情展示
			</view>
			<view class="" v-html="OrederData.instructions">
				
			</view>
		</view>
		
		<!-- 底部tab栏 -->
		<view class="placeholder" ></view>
		<view class="pay-box">
			<view class="pay-boottom">
				<view class="pay-total">
					￥{{OrederData.salePrice}}
				</view>
					<button class="pay-btn" size="mini" type="primary" @click="hendlePay">支付</button>
			</view>
		</view>
		
	</view>
</template>
<script setup>
	import {ref,reactive,computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { goodsOrder } from '@/common/js/api.js'
	const app = getApp()


	onLoad((options)=>{
		handergods(options.id)
	})
	
	// 请求数据列表
	const OrederData =ref([])
	// 获取input
	const inputvalue1 = ref('')
	const inputvalue2 = ref('')
	const handergods=(id)=>{
		goodsOrder({id}).then((res)=>{
			OrederData.value = res.data
		})
	}
	
	
	// 点击支付按钮
	const goodsId = ref('')
	const pickupType = ref('')
	const hendlePay=()=>{
		if(inputvalue1.value =='' && inputvalue2.value =='')
			return uni.showToast({
				title:'账号不能为空',
				icon:'none',
				duration:1000
			})
		if(inputvalue1.value != inputvalue2.value)	
			return uni.showToast({
				title:'账号不一致',
				icon:'none',
				duration:1000
			})
			

		goodsId.value = OrederData.value.id,
		pickupType.value = OrederData.value.pickupType,
		// 先验证
		uni.showModal({
				title: '确认账号',
				content: '充值账号：' + inputvalue2.value ,
				success: function(res) {
				if (res.confirm) {
				    // 执行确认后的操作
					console.log('quer1')
					uni.navigateTo({
						url:'/pages/particulars/orderNo?goodsId='+ goodsId.value + '&pickupType='+ pickupType.value
					})
					// 跳转到支付
				} 
				else {
					// 执行取消后的操作
				}
			}
		})
	}
	
	
</script>
<style scoped  lang="scss">
	.orderpage{
		background-color: #f1f1f1;
	}
	.card{
		    background-color: #fff;
		    margin: 20rpx 24rpx;
		    border-radius: 20rpx;
		    padding: 36rpx 24rpx;
			// 产品
			.film-box{
				    display: -webkit-box;
				    display: -webkit-flex;
				    display: flex;
					    justify-content: space-between;
				.film-info{
					    flex: 1;
					    display: -webkit-box;
					    display: -webkit-flex;
					    display: flex;

					    justify-content: space-between;
				
					    flex-direction: column;
					.film-name{
						    font-weight: 800;
						    font-size: 32rpx;
					}
					.film-original{
						    font-size: 24rpx;
						    font-weight: 400;
						    color: #999999;
						    text-decoration: line-through;
					}
					.film-price{
						    color: #EA1D62;
						    font-size: 36rpx;
						    font-weight: bold;
					}
				}
				.film-img{
					width: 160rpx;
					height: 160rpx;
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					justify-content: center;
					.loaded{
						max-width: 100%;
						max-height: 100%;	
					}
				}
			}
			
			// 账号
			.card-input{
				    margin-top: 20rpx;
			}
			
			// 详情展示
			.title{
				    font-size: 32rpx;
				    font-weight: 800;
			}
	}
	
	.placeholder{
		height:210rpx ;
	}
	.pay-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx 24rpx;
		.pay-boottom{
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			.pay-total{
					flex: 1;
					color: #EA1D62;
					font-size: 40rpx;
			}
			.pay-btn{
				background: #EA1D62;
				color: #fff;
				border-radius: 40rpx;
				width: 200rpx;
				height: 80rpx;
					line-height: 80rpx;
					font-size: 34rpx;
					font-weight: normal;
			}
		}
	}
		
</style>
